<template>
  <div class="content aviation-detail-right">
    <!-- 就业信息 -->
    <div class="card join-info">
      <div
        class="name"
        v-if="globalStore?.configData?.web_xueyuanjiuye != null"
        v-html="helpPeoples"
      ></div>
      <template v-else>
        <div class="pc-skeleton name">
          <Skeleton gap-skeleton width="50%" pc></Skeleton>
          <Skeleton pc block></Skeleton>
        </div>
        <div class="mobile-skeleton name-skeleton">
          <Skeleton :rows="2" mobile></Skeleton>
        </div>
      </template>
      <div class="swiper-banner" v-if="danmus">
        <div class="inner">
          <div
            class="row"
            v-for="(rowItem, rowIndex) in danmus"
            :key="rowIndex"
          >
            <Vue3Marquee>
              <div
                class="stu-info"
                v-for="(item, itemIndex) in rowItem"
                :key="itemIndex"
              >
                <div class="inner">
                  <img
                    class="logo"
                    v-logo-error
                    :src="item.headimgurl"
                    alt=""
                    v-if="item.headimgurl"
                  />
                  <img
                    class="logo"
                    src="~/assets/images/user-logo/default_logo.jpg"
                    alt=""
                    v-else
                  />
                  <span>{{ item.name }}</span>
                </div>
              </div>
            </Vue3Marquee>
          </div>
        </div>
      </div>
      <template v-else>
        <div class="swiper-banner skeleton" style="padding: 0">
          <Skeleton block height="100%"></Skeleton>
        </div>
      </template>
    </div>

    <!-- 岗位推荐 -->
    <div class="card recommend">
      <div class="name">{{ $t("content.aviation_detail.job_recommend") }}</div>
      <template v-if="JobList">
        <div class="recommend-list">
          <template v-for="(item, index) in JobList" :key="index">
            <div
              class="recommend-item pointer"
              @click="gotoJob(item)"
              :title="item.title"
              v-if="item.title || item.salary"
            >
              <div class="name">{{ item.title }}</div>
              <div class="salary">{{ item.salary }}</div>
            </div>
          </template>
        </div>
        <div class="read_more" @click="gotoJob">
          <span>{{ $t("btnText.view_more_employ_info") }}</span>
          <IconViewmore />
        </div>
      </template>
      <template v-else>
        <div class="pc-skeleton">
          <div class="recommend-skeleton">
            <div v-for="i in 6" :key="i">
              <Skeleton block height="100%"></Skeleton>
            </div>
          </div>
        </div>
        <div class="mobile-skeleton">
          <div>
            <div v-for="i in 5" :key="i">
              <Skeleton block mobile></Skeleton>
              <div class="divider-line"></div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Vue3Marquee } from "vue3-marquee";
import {
  computed,
  getCurrentInstance,
  inject,
  nextTick,
  onMounted,
  reactive,
  ref,
} from "vue";
import { JobRecommend, JoinJobInfo, TeacherInfo } from "./data";
import { postTalentList } from "../../../api/talent";
import { message } from "ant-design-vue";
import { useGlobalStore } from "../../../store";

const globalStore = useGlobalStore();

const gotoJob = (item) => {
  
  let type_id = globalStore.navHeaderList?.find(
    (item) => item.route_url.includes("/job")
  ).id;
  goto("/job", { type_id: type_id, id: item.id });
};

const loaded = inject("loaded");

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const helpPeoples = computed(() => {
  let str = $t("help_join_text") as string;
  str = str.replace("SC AEROSPACE ", "SC AEROSPACE <br/>");
  str = str.replace(/person_nums/gi, globalStore.configData?.web_xueyuanjiuye);
  return str;
});

defineProps<{
  data: any;
  danmus: any[];
}>();

const JobList = ref();
const JobListTotalPage = ref(0);
let listParams = reactive({
  cat_id: "1",
  air_id: "",
  position_id: "",
  address_id: "",
  salary_id: "",
  work_id: "",
  cert_id: "",
  edu_id: "",
  tag_id: "",
  title: "",
  rows: 4,
  page: 1,
});

const recJob = async () => {
  const res = await postTalentList(listParams);
  if (res.code == 200) {
    JobListTotalPage.value = res.data.last_page;
    JobList.value = res.data.data;
    listParams.rows = res.data.per_page;
  }
};

onMounted(() => {
  recJob();
});
</script>
<style scoped lang="less">
@import url("./media.less");

.name-skeleton {
  margin-bottom: 82px;
}

.btn {
  height: 40px;
}
.content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.name {
  font-weight: 600;
  font-size: 19px;
  color: #323232;
}
.join-info,
.recommend {
  & > .name {
    margin-bottom: 23px;
  }
}
.card {
  width: 100%;
}
.join-info {
  .swiper-banner {
    background: #f5f8fa;
    padding: 16px;
    &.skeleton {
      height: 165px;
    }
    & > .inner {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .row {
      white-space: nowrap;
    }
    .row:nth-child(2) {
      transform: translateX(-48px);
      width: calc(100% + 48px);
    }
    .row:nth-child(3) {
      width: calc(100% + 12px);
      transform: translateX(-12px);
    }
    .stu-info {
      margin-right: 18px;
      font-size: 16px;
      color: #36434d;
      border: 1px solid #ccd6de;
      background-color: #fff;
      display: flex;
      padding: 2px;
      border-radius: 200px;
      .inner {
        display: flex;
        gap: 8px;
        align-items: center;
      }
      .logo {
        width: 28px;
        height: 28px;
      }
      span {
        padding-right: 14px;
        white-space: nowrap;
      }
    }
  }
}
.recommend {
  .name {
    max-width: 80%;
  }
  .recommend-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    .recommend-item {
      font-size: 16px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f6f8fa;
      border-radius: 4px;
      gap: 10px;
      .name {
        color: #323232;
        font-weight: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .salary {
        font-size: 18px;
        color: #ff4060;
        white-space: nowrap;
        font-weight: 600;
      }
      &:hover {
        background-color: #3d88f2;
        .name,
        .salary {
          color: #fff;
        }
      }
    }
  }
  .read_more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #969696;
    margin-top: 24px;
    font-size: 16px;
    cursor: pointer;
  }
}

.recommend-skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
  & > div {
    height: 48px;
    border-radius: 4px;
    overflow: hidden;
  }
}
</style>
